<template>
  <el-row>
    <el-col :span="24">
      <div class="box">
        <div class="box-header">
          <el-col :span="8">
            <h3 class="box-title" style="line-height: 40px;">
              通知公告
            </h3>
          </el-col>
          <el-col :span="8">
            <el-button
              class="btn-link-large add-btn"
              @click="dialogFormVisible = true"
              v-if="operating3"
            >发布通知
            </el-button>
          </el-col>
        </div>
        <el-dialog title="发布通知" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="通知标题" :label-width="formLabelWidth">
            <el-input v-model="form.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="通知正文" :label-width="formLabelWidth">
            <!-- <el-input v-model="form.text" autocomplete="off"></el-input> -->
            <div style="margin-left: 10%;">
            <UE
              v-model="text"
              :config="config"
              ref="ue7"
              :id="ue7"
              :defaultMsg="defaultMsg"
            ></UE>
          </div> 
          </el-form-item>
          <el-form-item label="附件上传" :label-width="formLabelWidth">
            <el-upload
              class="upload-demo"
              action="http://8.142.34.26:8097/php/index.php/admin/Upload/HomepageInput"
              :data="{pid: '1'}"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :before-remove="beforeRemove"
              multiple
              :on-exceed="handleExceed"
              :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能zip/rar上传文件，且不超过15MB</div>

            <!--   <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
              </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit()">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="通知修改" :visible.sync="seeEdit">
        <el-form :model="form">
          <el-form-item label="通知标题" :label-width="formLabelWidth">
            <el-input v-model="editform.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="通知正文" :label-width="formLabelWidth">
            <!-- <el-input v-model="form.text" autocomplete="off"></el-input> -->
            <div style="margin-left: 10%;">
            <UE
              v-model="edittext"
              :config="config"
              ref="ue8"
              :id="ue8"
              :defaultMsg="defaultMsg"
            ></UE>
          </div> 
          </el-form-item>
          <el-form-item label="附件上传" :label-width="formLabelWidth">
            <el-upload
              class="upload-demo"
              action="http://8.142.34.26:8097/php/index.php/admin/Upload/HomepageInput"
              :data="{pid: '1'}"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :before-remove="beforeRemove"
              multiple
              :on-exceed="handleExceed"
              :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能zip/rar上传文件，且不超过15MB</div>

            <!--   <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
              </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="seeEdit = false">取 消</el-button>
          <el-button type="primary" @click="Updata()">确 定</el-button>
        </div>
      </el-dialog>
        <div class="box-body">
          <el-table
          :data="tableData"
          style="width:80%; margin-left: 10%;"
          :cell-style="tableCellStyle"
          highlight-current-row
          >
            <el-table-column
            v-if="operating3"
            prop="id"
            width="180">
            </el-table-column>
            
           <el-table-column
              prop="title"
              width="600">
              
            <!-- name的值是配置路由文件对某界面的命名name，接受值this.$router.params.id -->
             <template slot-scope="scope">
                <router-link :to="{name: 'homepage',params:{id:scope.row.id}}">
                  <a href="#" target="_blank" style="color:black">{{scope.row.title}}</a>
                </router-link>
              </template>
            </el-table-column>
            <el-table-column
            prop="update_time"
            ></el-table-column>
            <el-table-column  v-if="operating3"> 
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            layout="prev, pager, next"
            :page-count="total"
            style="float: right;"
          ></el-pagination>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import btnGroup from './Common/btn-group.vue'
import http from '../assets/js/http'
import UE from './ue.vue'

  export default {
  data() {
    return {
      seeEdit:false,
      currentPage: 1,
      total: 1,
      seeAdd:false,
      operating3:false,
      tableData:[],
      dialogFormVisible: false,
      form: {
        text: '',
        title: '',
      },
      text: "",
      ue7: 'ue7', 
      ue8: 'ue8', 
      config: {
        initialFrameWidth: '100%',
        initialFrameHeight: 150,
      },
      defaultMsg: '',
      fileList: [],
      file_id: [],
      editform: {
        edittext: '',
        title: '',
      },
      edittext: "",
      id:''
    }
  },
  methods: {
    // 存储缓存信息
    init() {
      _g.closeGlobalLoading()
      this.apiPost('admin/Traindata/School').then((res) => {
        this.handelResponse(res, (data) => {
          // console.log(res)
          let school = {}
          data.forEach(element => {
            school['sch_id_' + element.sch_id] = {
              sch_id: element.sch_id,
              sch_code: element.sch_code,
              sch_name: element.sch_name
            }
          })
          Lockr.set('schInfo', school)// 用户信息
          Lockr.set('schsInfo', res.data)
        })
      })
       // 获取下拉框
      this.apiPost("admin/Report/DropdowmList").then(res => {
        this.handelResponse(res, data => {
          // console.log(res)
          Lockr.set('achievements', res.data.achievements)
          Lockr.set('support', res.data.support)
          Lockr.set('type', res.data.type)
        })
      })
      //获取列表信息
      let data = {
        page: this.currentPage
      }
      console.log(data)
       this.apiPost("admin/Train/Homelist", data).then(res => {
        this.handelResponse(res, data => {
          console.log(res)
          this.tableData = res.data.data
          this.total = Math.ceil(res.data.total / res.data.per_page)
          console.log(this.total)
        })
      })
    },
    handlePreview(file) {
      console.log(file);
    },
    Updata() {
      if(this.edittext == ' '){
        _g.toastMsg('error','请输入通知正文！')
      }
      if(this.editform.title === ''){
         _g.toastMsg('error','请输入通知标题！')
      }
      if(this.file_id.length < 1){
        _g.toastMsg('error','请上传附件！')
      }
      let data = {
        id:this.id,
        text: this.edittext,
        title: this.editform.title,
        file_id: this.file_id 
      }
      console.log(data)
      this.apiPost("admin/Train/Homepageupdate", data).then(res => {
        this.handelResponse(res, data => {
          console.log(res)
          this.seeEdit = false
          this.init()
        })
      })
    },
    // handleExceed(files, fileList) {
    //   this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    // },
    handleSuccess(response, file, fileList) {
      console.log(fileList)
      // console.log(response)
      if(response.code == 200){
        this.file_id.push(response.data.file_id)
        console.log(this.file_id)
      }else{
          _g.toastMsg('error', response.error)
      }    
    },
    //提交表单
    submit() {
      if(this.text == ' '){
        _g.toastMsg('error','请输入通知正文！')
      }
      if(this.form.title === ''){
         _g.toastMsg('error','请输入通知标题！')
      }
      if(this.file_id.length < 1){
        _g.toastMsg('error','请上传附件！')
      }
      let data = {
        text: this.text,
        title: this.form.title,
        file_id: this.file_id 
      }
      // console.log(data)
      this.apiPost("admin/Train/Homepagewrite", data).then(res => {
        this.handelResponse(res, data => {
          console.log(res)
          this.dialogFormVisible = false
          this.init()
        })
      })
    },
    handleEdit(index, row) {
       // UE.delEditor("editor1");   
      console.log(row)
      this.seeEdit = true
      this.id = row.id
      // ue8.setContent();
      console.log(this.edittext)
      this.editform.title = row.title
      let data = {
        id: Number(row.id)
      }
      console.log(data)
      this.apiPost("admin/Train/Homepagelist",data).then(res => {
        this.handelResponse(res, data => {
          console.log(res.data)
          this.file_id = []
          this.fileList = res.data.file
          this.file_id.push(res.data.file_id)
          this.edittext = res.data.text 
          console.log(this.edittext)
        })
      })
    },
    handleDelete(index, row) {
      this.$confirm('确认删除该项目？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let data = {
            id: row.id
          }
          this.apiPost('admin/Train/HomepageDelete', data).then(res => {
            this.handelResponse(res, data => {
              _g.toastMsg('success', res.data)
              this.init()
            })
          })
        })
        .catch(() => {
          // handle error
        })

    },
     // 点击培训信息下的页码，返回对应的数据
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.init()
    },
    //
    tableCellStyle () {
      return 'border-color: white;'
    },
  },
  created() {
    this.init()
    switch (Lockr.get('userInfo').level) {
    case 1:
      // 辅导员
      this.operating1 = true
      break
    case 2:
      // 高校
      // this.operating1 = true
      break
    case 3:
      // 教育厅
      this.operating3 = true
      break
    case 4:
      // 立项专家
      this.operating3 = false
      break
    case 5:
      // 结项专家
      this.operating3 = false
      break  
    default:
      // admin
      this.operating3 = true
      break
  }
  },
  computed: {
  },
  components: {
    btnGroup,
    UE
  },
  mixins: [http]
}
</script>
<style scoped>
.box {
  position: relative;
  border-radius: 3px;
  background: #fff;
  border-top: 3px solid #d2d6de;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-top-color: #3c8dbc;
}
.box-body {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  padding: 10px;
  min-height: 0.01%;
  overflow-x: auto;
}
.box-header {
  height: 34px;
  line-height: 34px;
  color: #444;
  display: block;
  padding: 10px;
  position: relative;
}
.el-table__body tr.current-row>td{
  background-color: #f19944 !important;
  color:red;  

}
.el-table--enable-row-hover .el-table__body tr:hover>td {
  background-color: #f19944;
  color: black; 
}
</style>